<template>
  <div id="body">
    <div id="header">
      <div class="back">
        <van-icon name="arrow-left" @click="handleBackPage"/>
      </div>
      <div class="title">类目</div>
      <div class="back">
        <van-icon name="cart-o" @click="handleShopping" />
      </div>
    </div>
    <div id="main">
      <div class="wai_left">
        <div id="main_left">
          <ul>
            <li
              v-for="(item, index) in listname"
              :key="index"
              @click="changeIdx(index)"
              :class="idx == index ? 'active' : ''"
            >
              {{ item }}
            </li>
          </ul>
        </div>
      </div>
      <div class="wai_right">
        <div id="main_right">
          <div class="top">
            <p v-show="isShowTop">本月热销</p>
            <div class="top_detail" v-show="isShowTop">
              <dl v-for="itm in beforeData" :key="itm.id">
                <dt>
                  <img
                    :src="'https://mfs.ys7.com/' + itm.good.image_url"
                    alt=""
                  />
                </dt>
                <dd>
                  {{ itm.good.keyword }}
                </dd>
              </dl>
            </div>
          </div>
          <div class="content">
            <p v-show="isShowTop">好评推荐</p>
            <div
              class="product"
              :pathnames="handleCut(idx)"
              v-for="item in listdata"
              :key="item.id"
              @click="detal(item.goods_id)"
            >
            
              <img :src="'https://mfs.ys7.com/' + item.good.image_url" alt="" />
              <div class="text">
                <h1>{{ item.good.name }}</h1>
                <h2>
                  <span v-show="item.good.selling_point.split('|').length-1" v-for="(sort,i) in item.good.selling_point.split('|').slice(0,2)" :key="i">{{sort}}</span>
                </h2>
                <div class="price">
                  <h3>
                    ￥<i>{{ item.good.price.low }}</i
                    ><em>起</em>
                  </h3>
                  <h4>
                    ￥<strong>{{ item.good.price.low }}</strong>
                  </h4>
                </div>
              </div> 
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import instance from "../utils/request";
export default {
  components: {},
  data() {
    return {
      pathnames: [
        "goods/ListApi?t=1635908732325&position=hot_recommend",
        "goods/ListApi?t=1635908781256&position=ipcamera",
        'goods/ListApi?t=1635915028282&position=doorLock',
        "goods/ListApi?t=1635915063079&position=cateye",
        "goods/ListApi?t=1635915079444&position=combination",
        "goods/ListApi?t=1635915098984&position=nvr",
        "goods/ListApi?t=1635915120206&position=alarm",
        "goods/ListApi?t=1635915135474&position=curtain",
        "goods/ListApi?t=1635915150722&position=sportsCamera",
        "goods/ListApi?t=1635915163838&position=robot",
        "goods/ListApi?t=1635915179671&position=SC",
        "goods/ListApi?t=1635915193048&position=store",
        "goods/ListApi?t=1635915206215&position=router",
        "goods/ListApi?t=1635915218785&position=parts",
        "goods/ListApi?t=1635915232869&position=homeService"
      ],
      listname: [
        "热门推荐",
        "摄像机",
        "智能锁",
        "猫眼门铃",
        "套装方案",
        "智能屏",
        "传感报警",
        "智能控制",
        "智能家居",
        "儿童看护",
        "运动相机",
        "智能存储",
        "网络通讯",
        "配件",
        "上门服务",
      ],
      idx: 0,
      listdata: null,
      beforeData: null,
      isShowTop:false,
      ex:''
    };
  },
  created() {
    instance.get("/yingshi/" + this.pathnames[0]).then((res) => {
      //  console.log(res.data.data.submenu[0].relate);
      this.listdata = res.data.data.submenu[0].relate;
      this.beforeData = res.data.data.submenu[0].relate.slice(0, 3);
    });
  },
  watch: {
    idx(newval) {
      instance.get("/yingshi/" + this.pathnames[newval]).then((res) => {
        this.listdata = res.data.data.submenu[0].relate;
        this.beforeData = res.data.data.submenu[0].relate.slice(0, 3);
      });
    },
  },
  methods: {
    detal(i){
      
      this.$router.push(`/detail/${i}`)
    },
    changeIdx(index) {
      this.idx = index;
      this.isShowTop = index==1||index==2||index==5||index==6||index==8||index==14 ? true : false;
    },
    handleCut(i) {
      this.idx = i;
    },
    handleShopping(){
      this.$router.push('/shopping');
    }
  },
};
</script>
<style src="../assets/css/list.css" scoped></style>